<!DOCTYPE html>
<html lang="zh-CN"> <!-- 指定语言为中文, 方便阅读与无障碍工具识别 -->

<head>
  <meta charset="utf-8"> <!-- 使用 UTF-8 编码, 支持中文显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
  <title>Git 命令速查</title> <!-- 页面标题 -->
  <style>
    /* ========== 基础样式 ========== */
    :root {
      /* 定义浅色主题下的 CSS 变量, 便于切换主题 */
      --bg: #ffffff;
      /* 页面背景色 */
      --text: #1f2937;
      /* 主文字颜色 */
      --muted: #6b7280;
      /* 次要文字颜色 */
      --card: #f9fafb;
      /* 卡片背景色 */
      --border: #e5e7eb;
      /* 边框颜色 */
      --accent: #2563eb;
      /* 强调色, 用于高亮与按钮 */
      --shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
      /* 阴影 */
      --radius: 16px;
      /* 圆角大小 */
    }

    .dark {
      /* 深色主题变量覆盖 */
      --bg: #0b0f19;
      /* 深色背景 */
      --text: #e5e7eb;
      /* 浅色文字 */
      --muted: #9ca3af;
      /* 次级文字 */
      --card: #111827;
      /* 卡片背景 */
      --border: #1f2937;
      /* 边框 */
      --accent: #60a5fa;
      /* 强调色 */
      --shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
      /* 深色阴影 */
    }

    * {
      box-sizing: border-box;
    }

    /* 统一盒模型, 避免尺寸计算混乱 */
    html,
    body {
      height: 100%;
      scrollbar-width: thin;
    }

    /* 让页面撑满视口高度 */
    body {
      /* 页面主体样式 */
      margin: 0;
      /* 清除默认外边距 */
      background: var(--bg);
      /* 使用主题背景 */
      color: var(--text);
      /* 使用主题文字颜色 */
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Noto Sans CJK SC, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
      /* 优先系统无衬线字体, 兼容中文 */
      line-height: 1.5;
      /* 行高提高可读性 */
    }

    /* ========== 自定义滚动条样式 ========== */
    /* Webkit浏览器滚动条样式 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--card);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
      transition: background-color 0.2s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }

    ::-webkit-scrollbar-corner {
      background: var(--card);
    }

    /* Firefox滚动条样式 */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--border) var(--card);
    }

    /* ========== 布局 ========== */
    .container {
      /* 页面主容器, 自适应两栏布局 */
      display: grid;
      /* 使用 CSS 网格布局 */
      grid-template-columns: 360px 1fr;
      /* 左侧侧栏固定宽度, 右侧内容自适应 */
      gap: 20px;
      /* 栏间距 */
      padding: 24px;
      /* 内边距 */
      height: calc(100vh - 80px);
      /* 设置容器高度，减去工具栏高度 */
      overflow: hidden;
      /* 防止容器本身滚动 */
    }

    @media (max-width: 960px) {

      /* 窄屏时调整布局为单栏 */
      .container {
        grid-template-columns: 1fr;
        height: calc(100vh - 80px);
        /* 移动端也保持固定高度 */
      }
    }

    /* ========== 顶部工具栏 ========== */
    .toolbar {
      /* 顶部工具区容器 */
      position: sticky;
      /* 让工具栏在滚动时保持可见 */
      top: 0;
      /* 吸顶位置 */
      z-index: 10;
      /* 提升层级避免被覆盖 */
      background: var(--bg);
      /* 背景与页面一致 */
      border-bottom: 1px solid var(--border);
      /* 底部分割线 */
      padding: 12px 24px;
      /* 内边距 */
      display: flex;
      /* 横向排列子元素 */
      gap: 12px;
      /* 元素间距 */
      align-items: center;
      /* 垂直居中 */
    }

    .title {
      /* 页面标题样式 */
      font-size: 20px;
      /* 字号 */
      font-weight: 800;
      /* 粗体 */
      letter-spacing: 0.3px;
      /* 字间距 */
    }

    .search {
      /* 搜索输入框样式 */
      flex: 1;
      /* 占据可用空间 */
      display: flex;
      /* 内部水平布局 */
      align-items: center;
      /* 垂直居中 */
      gap: 8px;
      /* 元素间距 */
      background: var(--card);
      /* 背景 */
      border: 1px solid var(--border);
      /* 边框 */
      border-radius: var(--radius);
      /* 圆角 */
      padding: 8px 12px;
      /* 内边距 */
      box-shadow: var(--shadow);
      /* 阴影 */
    }

    .search input {
      /* 搜索输入框 */
      width: 100%;
      /* 宽度填满容器 */
      outline: none;
      /* 去掉默认焦点样式 */
      background: transparent;
      /* 透明背景 */
      border: 0;
      /* 移除边框 */
      color: var(--text);
      /* 文字颜色跟随主题 */
      font-size: 14px;
      /* 字号 */
    }

    .btn {
      /* 通用按钮样式 */
      border: 1px solid var(--border);
      /* 边框 */
      background: var(--card);
      /* 背景 */
      color: var(--text);
      /* 文字颜色 */
      border-radius: 9999px;
      /* 胶囊形状 */
      padding: 8px 14px;
      /* 触控友好尺寸 */
      cursor: pointer;
      /* 鼠标指针样式 */
      box-shadow: var(--shadow);
      /* 阴影 */
    }

    .btn:hover {
      /* 悬停高亮 */
      border-color: var(--accent);
      /* 边框变为强调色 */
    }

    /* ========== 侧栏树形 ========== */
    .sidebar {
      /* 左侧树形容器 */
      background: var(--card);
      /* 背景 */
      border: 1px solid var(--border);
      /* 边框 */
      border-radius: var(--radius);
      /* 圆角 */
      padding: 12px;
      /* 内边距 */
      box-shadow: var(--shadow);
      /* 阴影 */
      height: 100%;
      /* 占满容器高度 */
      overflow-y: auto;
      /* 垂直滚动 */
      overflow-x: hidden;
      /* 隐藏水平滚动 */
      position: sticky;
      /* 粘性定位 */
      top: 0;
      /* 顶部对齐 */
    }

    .tree {
      /* 树的 ul 列表基础样式 */
      list-style: none;
      /* 去掉默认圆点 */
      margin: 0;
      /* 外边距清零 */
      padding-left: 8px;
      /* 左侧缩进 */
    }

    .node {
      /* 树中每一个节点容器 */
      display: flex;
      /* 横向排列图标与文字 */
      align-items: center;
      /* 垂直居中 */
      gap: 8px;
      /* 间距 */
      padding: 6px 6px;
      /* 内边距 */
      border-radius: 10px;
      /* 圆角 */
      user-select: none;
      /* 避免误选中文字 */
    }

    .node:hover {
      /* 悬停反馈 */
      background: rgba(99, 102, 241, 0.08);
      /* 略微高亮 */
    }

    .twist {
      /* 折叠箭头按钮 */
      width: 18px;
      /* 宽度 */
      height: 18px;
      /* 高度 */
      display: inline-flex;
      /* 内联弹性布局以便居中图标 */
      align-items: center;
      /* 垂直居中 */
      justify-content: center;
      /* 水平居中 */
      font-size: 14px;
      /* 字号 */
      border: 1px solid var(--border);
      /* 边框 */
      border-radius: 6px;
      /* 圆角 */
      background: transparent;
      /* 透明背景 */
      cursor: pointer;
      /* 指针 */
    }

    .label {
      /* 节点文字标签 */
      flex: 1;
      /* 占满剩余空间 */
      font-weight: 600;
      /* 稍微加粗 */
      font-size: 14px;
      /* 字号 */
    }

    .badge {
      /* 类别彩色小标签 */
      font-size: 11px;
      /* 小字号 */
      padding: 2px 8px;
      /* 内边距 */
      border-radius: 9999px;
      /* 胶囊形 */
      border: 1px solid var(--border);
      /* 细边框 */
      opacity: 0.9;
      /* 略透明 */
      white-space: nowrap;
      /* 不换行 */
    }

    /* 类别颜色, 用不同背景来区分模块 */
    .c-repo {
      background: #dcfce7;
    }

    .c-branch {
      background: #dbeafe;
    }

    .c-commit {
      background: #fde68a;
    }

    .c-history {
      background: #f3e8ff;
    }

    .c-merge {
      background: #fee2e2;
    }

    .c-remote {
      background: #cffafe;
    }

    .c-work {
      background: #e9d5ff;
    }

    .c-extra {
      background: #e5e7eb;
    }

    /* ========== 右侧详情区 ========== */
    .panel {
      /* 右侧详情卡片容器 */
      background: var(--card);
      /* 背景 */
      border: 1px solid var(--border);
      /* 边框 */
      border-radius: var(--radius);
      /* 圆角 */
      padding: 16px;
      /* 内边距 */
      box-shadow: var(--shadow);
      /* 阴影 */
      height: 100%;
      /* 占满容器高度 */
      overflow-y: auto;
      /* 垂直滚动 */
      overflow-x: hidden;
      /* 隐藏水平滚动 */
      display: flex;
      flex-direction: column;
      /* 垂直布局 */
    }

    .panel #panelContent {
      flex: 1;
      /* 内容区域占据剩余空间 */
      overflow-y: auto;
      /* 内容区域可滚动 */
    }

    .panel h2 {
      /* 标题样式 */
      margin: 0 0 8px 0;
      /* 外边距 */
      font-size: 18px;
      /* 字号 */
    }

    .panel .hint {
      /* 提示文本样式 */
      color: var(--muted);
      /* 次级颜色 */
      font-size: 13px;
      /* 字号 */
      margin-bottom: 12px;
      /* 下间距 */
    }

    .hint {
      font-size: 10px;
    }

    table {
      /* 表格基础样式 */
      width: 100%;
      /* 撑满容器 */
      border-collapse: collapse;
      /* 合并边框 */
      overflow: hidden;
      /* 隐藏圆角外的内容 */
      border-radius: 12px;
      /* 圆角 */
      margin-bottom: 16px;
      /* 表格间距 */
    }

    th,
    td {
      /* 表头与单元格样式 */
      border-bottom: 1px solid var(--border);
      /* 下边框 */
      padding: 8px 10px;
      /* 内边距 */
      text-align: left;
      /* 左对齐 */
      vertical-align: top;
      /* 顶部对齐 */
      font-size: 13px;
      /* 字号 */
      word-break: break-word;
      /* 长单词换行 */
    }

    thead th {
      /* 表头高亮 */
      background: rgba(37, 99, 235, 0.08);
      /* 浅色背景 */
      font-weight: 700;
      /* 加粗 */
      position: sticky;
      /* 粘性定位 */
      top: 0;
      /* 顶部固定 */
      z-index: 1;
      /* 层级提升 */
    }

    /* 表格容器滚动优化 */
    .panel h3 {
      margin: 16px 0 8px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
    }

    .panel h3:first-child {
      margin-top: 0;
    }

    .empty {
      /* 空状态提示样式 */
      color: var(--muted);
      /* 次级颜色 */
      text-align: center;
      /* 居中 */
      padding: 24px;
      /* 内边距 */
      font-size: 14px;
      /* 字号 */
    }

    /* ========== 高亮搜索命中 ========== */
    mark {
      /* 浏览器原生 <mark> 高亮样式 */
      padding: 0 2px;
      /* 左右留白 */
      border-radius: 4px;
      /* 圆角 */
      background: #fde68a;
      /* 高亮背景 */
    }
  </style>
</head>

<body>
  <div class="toolbar"> <!-- 顶部工具栏容器 -->
    <div class="title">Git 命令树 · 全参数速查</div> <!-- 标题文字 -->
    <div class="search"> <!-- 搜索框容器 -->
      <input id="search" type="search" placeholder="搜索命令或参数... 例如: branch -r, remote -v, --rebase" />
      <!-- 搜索输入框, 用于实时过滤 -->
    </div>
    <button id="toggle" class="btn" title="切换亮暗主题">切换主题</button> <!-- 切换主题按钮 -->
    <button id="expandAll" class="btn" title="展开全部节点">全部展开</button> <!-- 展开按钮 -->
    <button id="collapseAll" class="btn" title="折叠全部节点">全部折叠</button> <!-- 折叠按钮 -->
  </div>

  <div class="container"> <!-- 主布局容器, 左侧树形与右侧详情 -->
    <aside class="sidebar"> <!-- 左侧树形侧栏 -->
      <ul id="tree" class="tree"></ul> <!-- 树的根列表节点 -->
    </aside>

    <main class="panel"> <!-- 右侧详情面板 -->
      <h2 id="panelTitle">提示</h2> <!-- 详情面板标题, 初始显示提示 -->
      <div id="panelHint" class="hint">点击左侧命令节点查看参数与示例, 或使用上方搜索框按关键字过滤</div> <!-- 详情面板提示文本 -->
      <div id="panelContent" class="empty">未选择任何命令</div> <!-- 详情面板内容区, 初始为空状态 -->
    </main>
  </div>
  <script src="./gittree.js"></script>
  <script>
    // ========== 数据定义: Git 命令与参数 ==========
    // 说明: 这里用一个对象表示整个命令树, 每个命令包含: 名称, 分类, 描述, 子命令, 参数列表, 常见示例.
    // 为了实用性与体积平衡, 已覆盖常用与高频的参数与子命令, 同时包含你指出的 -v, -r 等选项.

    /** 分类颜色说明与中文名, 用于右侧徽章展示 */
    const CATEGORY_META = { // 分类元数据对象
      repo: { label: "仓库管理", badge: "c-repo" }, // 仓库管理分类
      branch: { label: "分支与标签", badge: "c-branch" }, // 分支与标签分类
      commit: { label: "提交与索引", badge: "c-commit" }, // 提交与索引分类
      history: { label: "历史与查询", badge: "c-history" }, // 历史与查询分类
      merge: { label: "合并与变基", badge: "c-merge" }, // 合并与变基分类
      remote: { label: "远程与同步", badge: "c-remote" }, // 远程与同步分类
      work: { label: "工作区与多工作区", badge: "c-work" }, // 工作区分类
      extra: { label: "工具与其他", badge: "c-extra" }, // 其他工具分类
    };

    // ========== 工具函数: 转义与高亮 ==========
    const escapeHTML = s => s
      .replace(/&/g, "&amp;") // 转义 & 避免被解析成实体
      .replace(/</g, "&lt;") // 转义 < 符号
      .replace(/>/g, "&gt;") // 转义 > 符号
      .replace(/\"/g, "&quot;"); // 转义双引号

    /** 根据关键字把文本命中部分包裹 <mark> 用于高亮 */
    function highlight(text, keyword) { // 定义高亮函数
      if (!keyword) return escapeHTML(text); // 没有关键字则只做转义
      const re = new RegExp("(" + keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")", "ig"); // 构造不区分大小写的安全正则
      return escapeHTML(text).replace(re, "<mark>$1</mark>"); // 替换命中的片段
    }

    // ========== 渲染左侧树形 ==========
    const treeEl = document.getElementById("tree"); // 获取树的根元素

    /** 创建一个树节点 li 元素 */
    function createNode(cmd, keyword = "") { // cmd 是命令对象, keyword 是搜索关键字
      const li = document.createElement("li"); // 创建 li 容器

      const row = document.createElement("div"); // 每个节点的行容器
      row.className = "node"; // 添加样式类

      const twist = document.createElement("button"); // 折叠按钮
      twist.className = "twist"; // 按钮样式
      const hasChildren = !!(cmd.subcommands || cmd.options); // 判断是否存在子级可展开
      twist.textContent = hasChildren ? "▶" : "•"; // 有子级显示箭头, 否则圆点
      twist.disabled = !hasChildren; // 没子级则禁用按钮

      const label = document.createElement("div"); // 标签文本容器
      label.className = "label"; // 应用样式
      label.innerHTML = highlight(cmd.name, keyword); // 渲染命令名并高亮

      const badge = document.createElement("span"); // 分类徽章
      const meta = CATEGORY_META[cmd.category] || CATEGORY_META.extra; // 获取分类元数据
      badge.className = `badge ${meta.badge}`; // 设置彩色徽章类
      badge.textContent = meta.label; // 显示分类中文名

      row.appendChild(twist); // 将折叠按钮加入行
      row.appendChild(label); // 将标签加入行
      row.appendChild(badge); // 将徽章加入行

      // 绑定点击显示右侧详情
      row.addEventListener("click", (e) => { // 监听点击事件
        if (e.target === twist) return; // 点击的是折叠按钮则不触发详情
        showDetails(cmd, keyword); // 展示右侧详情
      });

      li.appendChild(row); // 将行加入 li

      // 创建子列表容器
      const ul = document.createElement("ul"); // 用于放置子项
      ul.className = "tree"; // 复用树样式
      ul.style.display = "none"; // 初始折叠

      // 渲染子命令
      if (cmd.subcommands) { // 如果有子命令
        cmd.subcommands.forEach(sc => { // 遍历子命令数组
          const sci = document.createElement("li"); // 子命令 li
          const scRow = document.createElement("div"); // 子命令行
          scRow.className = "node"; // 应用样式
          scRow.innerHTML = `<span class="label">${highlight(sc.name, keyword)}</span>`; // 子命令名称支持高亮
          sci.appendChild(scRow); // 加入子 li
          ul.appendChild(sci); // 子 li 加入子列表
        });
      }

      // 渲染参数
      if (cmd.options) { // 如果有参数
        cmd.options.forEach(op => { // op 是 [短参, 长参, 说明]
          const oi = document.createElement("li"); // 参数 li
          const opRow = document.createElement("div"); // 参数行
          opRow.className = "node"; // 应用样式
          const shortOpt = op[0] ? `<code>${highlight(op[0], keyword)}</code>` : ""; // 短参代码样式
          const longOpt = op[1] ? `<code>${highlight(op[1], keyword)}</code>` : ""; // 长参代码样式
          const desc = op[2] ? `<span class="hint">${highlight(op[2], keyword)}</span>` : ""; // 描述
          opRow.innerHTML = `${shortOpt} ${longOpt} ${desc}`; // 组装 HTML
          oi.appendChild(opRow); // 添加到参数 li
          ul.appendChild(oi); // 参数 li 加入子列表
        });
      }

      li.appendChild(ul); // 将子列表加入父 li

      // 折叠按钮点击逻辑
      twist.addEventListener("click", (e) => { // 监听折叠按钮点击
        e.stopPropagation(); // 阻止冒泡, 避免触发行点击
        const open = ul.style.display !== "none"; // 当前是否展开
        ul.style.display = open ? "none" : "block"; // 切换展开状态
        twist.textContent = open ? "▶" : "▼"; // 切换箭头方向
      });

      return li; // 返回构建好的节点
    }

    /** 根据当前关键字渲染整个树 */
    function renderTree(keyword = "") { // 定义渲染函数
      treeEl.innerHTML = ""; // 清空树容器
      const filtered = filterTree(keyword); // 先过滤数据
      filtered.forEach(cmd => { // 遍历过滤后的命令
        treeEl.appendChild(createNode(cmd, keyword)); // 创建并加入节点
      });
      if (!filtered.length) { // 如果没有匹配结果
        const li = document.createElement("li"); // 创建占位 li
        li.innerHTML = `<div class="empty">没有匹配结果, 换个关键词试试</div>`; // 空态提示
        treeEl.appendChild(li); // 加入树容器
      }
    }

    // ========== 右侧详情渲染 ==========
    const panelTitle = document.getElementById("panelTitle"); // 获取详情标题元素
    const panelHint = document.getElementById("panelHint"); // 获取详情提示元素
    const panelContent = document.getElementById("panelContent"); // 获取详情内容元素

    /** 展示某个命令的详情 */
    function showDetails(cmd, keyword = "") { // 定义详情展示函数
      const meta = CATEGORY_META[cmd.category] || CATEGORY_META.extra; // 获取分类元信息
      panelTitle.innerHTML = `${escapeHTML(cmd.name)} <span class="badge ${meta.badge}">${meta.label}</span>`; // 标题包含分类徽章
      panelHint.textContent = cmd.description || ""; // 展示命令描述

      // 构建参数与子命令的表格
      const parts = []; // 存放 HTML 片段的数组

      if (cmd.subcommands && cmd.subcommands.length) { // 如果存在子命令
        parts.push(`<h3>子命令</h3>`); // 子命令标题
        parts.push(`<table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody>`); // 表头
        cmd.subcommands.forEach(sc => { // 遍历子命令
          parts.push(`<tr><td><code>${highlight(sc.name, keyword)}</code></td><td>${highlight(sc.description || "", keyword)}</td></tr>`); // 每条子命令一行
        });
        parts.push(`</tbody></table>`); // 结束表格
      }

      if (cmd.options && cmd.options.length) { // 如果存在参数
        parts.push(`<h3>参数</h3>`); // 参数标题
        parts.push(`<table><thead><tr><th>短参</th><th>长参</th><th>说明</th></tr></thead><tbody>`); // 表头
        cmd.options.forEach(op => { // 遍历参数
          parts.push(`<tr><td>${op[0] ? `<code>${highlight(op[0], keyword)}</code>` : ""}</td><td>${op[1] ? `<code>${highlight(op[1], keyword)}</code>` : ""}</td><td>${highlight(op[2] || "", keyword)}</td></tr>`); // 每个参数一行
        });
        parts.push(`</tbody></table>`); // 结束表格
      }

      if (cmd.examples && cmd.examples.length) { // 如果存在示例
        parts.push(`<h3>示例</h3>`); // 示例标题
        parts.push(`<table><thead><tr><th>命令</th></tr></thead><tbody>`); // 表头
        cmd.examples.forEach(ex => { // 遍历示例
          parts.push(`<tr><td><code>${highlight(ex, keyword)}</code></td></tr>`); // 每条示例一行
        });
        parts.push(`</tbody></table>`); // 结束表格
      }

      if (!parts.length) { // 如果没有任何详细内容
        panelContent.innerHTML = `<div class="empty">该命令暂无更多详情</div>`; // 显示空态
      } else {
        panelContent.innerHTML = parts.join(""); // 拼接并渲染所有片段
      }
    }

    // ========== 搜索与过滤 ==========
    const searchInput = document.getElementById("search"); // 获取搜索输入框

    /** 过滤规则: 命令名, 参数, 子命令或描述中包含关键字即匹配 */
    function filterTree(keyword) { // 定义过滤函数
      if (!keyword) return GIT_TREE; // 没关键字时返回原始数据
      const kw = keyword.toLowerCase(); // 统一转小写比较
      return GIT_TREE.filter(cmd => { // 过滤数组
        if (cmd.name.toLowerCase().includes(kw)) return true; // 命令名命中
        if ((cmd.description || "").toLowerCase().includes(kw)) return true; // 描述命中
        if (cmd.subcommands && cmd.subcommands.some(sc => sc.name.toLowerCase().includes(kw))) return true; // 子命令命中
        if (cmd.options && cmd.options.some(op => (op[0] && op[0].toLowerCase().includes(kw)) || (op[1] && op[1].toLowerCase().includes(kw)))) return true; // 参数命中
        if (cmd.examples && cmd.examples.some(ex => ex.toLowerCase().includes(kw))) return true; // 示例命中
        return false; // 否则不匹配
      });
    }

    // 输入时实时过滤与渲染
    searchInput.addEventListener("input", () => { // 监听输入事件
      const keyword = searchInput.value.trim(); // 获取关键字
      renderTree(keyword); // 重新渲染树
    });

    // ========== 展开与折叠全部 ==========
    document.getElementById("expandAll").addEventListener("click", () => { // 绑定展开全部按钮
      document.querySelectorAll(".sidebar .tree > li").forEach(li => { // 遍历顶层 li
        const twist = li.querySelector(".twist"); // 找到折叠按钮
        const ul = li.querySelector("ul.tree"); // 找到子列表
        if (ul && twist) { // 如果存在子级
          ul.style.display = "block"; // 展开
          twist.textContent = "▼"; // 箭头向下
        }
      });
    });

    document.getElementById("collapseAll").addEventListener("click", () => { // 绑定折叠全部按钮
      document.querySelectorAll(".sidebar .tree > li").forEach(li => { // 遍历顶层 li
        const twist = li.querySelector(".twist"); // 找到折叠按钮
        const ul = li.querySelector("ul.tree"); // 找到子列表
        if (ul && twist) { // 如果存在子级
          ul.style.display = "none"; // 折叠
          twist.textContent = "▶"; // 箭头向右
        }
      });
    });

    // ========== 主题切换 ==========
    const toggleBtn = document.getElementById("toggle"); // 获取切换按钮
    const root = document.documentElement; // 获取根元素
    // 读取本地存储的主题偏好
    const savedTheme = localStorage.getItem("git-tree-theme"); // 从 localStorage 读取保存的主题
    if (savedTheme === "dark") { // 如果是深色
      root.classList.add("dark"); // 应用深色主题类
    }
    toggleBtn.addEventListener("click", () => { // 监听点击切换
      root.classList.toggle("dark"); // 切换类名
      localStorage.setItem("git-tree-theme", root.classList.contains("dark") ? "dark" : "light"); // 把新主题写入存储
    });

    // ========== 首次渲染 ==========
    renderTree(""); // 首次无关键字渲染整个树
  </script>
</body>

</html>